<script lang="ts">
  import { HSplitPane, VSplitPane } from "$lib/splitpane";
  import { actixGraphqlEndpoint } from "$lib/js/stores";
  import { tooltip } from "$lib/js/tooltip";

  import type { QuizItem, KV, Quiz } from "$lib/ebm";
  import {
    Query,
    useQuery,
    useMutation,
    useQueryClient,
  } from "@sveltestack/svelte-query";
  import { request, gql } from "graphql-request";
  import { dataset_dev } from "svelte/internal";
  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let quizitemid = attributes.find((x) => x.k == "quiz_item_id");
  let classPointerEventsNone;
  const onMouseDown = () => {
    classPointerEventsNone = "pointer-events-none";
  };
  const onMouseUp = () => {
    classPointerEventsNone = "";
  };

  let endpoint = $actixGraphqlEndpoint;
  const FIND_QUIZITEM_QUERY = gql`
    query ($id: ID!) {
      quizitem: node(id: $id) {
        id
        createdAt
        updatedAt
        ... on QuizItem {
          title
          description
          descriptionMarkdown
          m3U8
          isMaster
          masterId
          options {
            k
            v
          }
          master {
            id
            title
            description
          }
        }
      }
    }
  `;

  const findQuizItemResult = useQuery<QuizItem, { message: string }>(
    ["quizitem", quizitemid.v],
    async () => {
      const { quizitem } = await request(endpoint, FIND_QUIZITEM_QUERY, {
        id: quizitemid.v,
      });
      return quizitem;
    }
  );

  let activeEdgeId = "";
  const handleEdgeClick = (id) => () => {
    activeEdgeId = id;
    console.log("handleEdgeClick activeEdgeId=", activeEdgeId);
  };
</script>

{#if $findQuizItemResult.isLoading}
  Loading...
{:else if $findQuizItemResult.isError}
  Error {$findQuizItemResult.error.message}
{:else}
  <table class="bg-white text-gray-900 w-full shadow-none">
    <thead class="pt-4">
      <tr>
        <th
          colspan="2"
          class="text-left text-lg bg-blue-700 border-b-2  text-white"
        >
          Edges Out From This QuizItem({$findQuizItemResult.data.title})
        </th>
        <th class="text-lg bg-blue-700 border-b-2  text-white text-center">
          <i class="pl-2 fa-regular fa-clone cursor-pointer" 
              use:tooltip={{ theme: "light" }}
              title="Clone QuizItem: {$findQuizItemResult.data.title}"
          />
        </th>
      </tr>
      <tr>
        <th class="bg-blue-700 text-white p-2">Subject</th>
        <th class="bg-blue-700 text-white p-2">Predicate</th>
        <th class="bg-blue-700 text-white p-2">Object</th>
      </tr>
    </thead>
    <tbody>
      {#if $findQuizItemResult.data.clones}
        {#each $findQuizItemResult.data.clones as quiz}
          <tr
            class="{activeEdgeId === quiz.id
              ? 'bg-rose-400'
              : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
            on:click={handleEdgeClick(quiz.id)}
          >
            <td class="p-2">{$findQuizItemResult.data.title}</td>
            <td class="p-2">CLONED_BY<i class="fas fa-plus" /></td>
            <td class="p-2">{quiz.title}-{quiz.id}</td>
          </tr>
        {/each}
      {/if}
    </tbody>
  </table>
{/if}
